<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="/js/jquery-1.11.1.js" ></script>
</head>
<body>
    <form id="myForm" action="" method="post">
        球队ID:<input type="text" name="teamId" id="teamId" /><br/>
        球队名称:<input type="text" name="teamName" /><br/>
        球队位置:<input type="text" name="location" /><br/>
        <button type="button" id="btnGetAll">查询所有GET</button>
        <button type="button" id="btnGetOne">查询单个GET</button>
        <button type="button" id="btnPost">添加POST</button>
        <button type="button" id="btnPut">更新PUT</button>
        <button type="button" id="btnDel">删除DELETE</button>
    </form>
    <p id="showResult"></p>
</body>
    <script>
        $(function () {
            <!-- 删除-->
            $("#btnDel").click(function () {
                $.ajax({
                    type:"DELETE",
                    url:"/team/"+$("#teamId").val(),
                    data:"", /*$("#myForm").serialize()+"&_method=DELETE"*/
                    dataType:"json",
                    success:function (data) {
                        if (data.code==200){
                            $("#showResult").html(data.msg);
                        }else{
                            $("#showResult").html(data.msg);
                        }
                    }
                });
            });

            <!-- PUT 更新操作 -->
            $("#btnPut").click(function () {
                $.ajax({
                    type:"POST",
                    url:"/team/"+$("#teamId").val(),
                    data:$("#myForm").serialize()+"&_method=PUT",
                    dataType:"json",
                    success:function (data) {
                        alert(data)
                        if (data.code==200){
                            $("#showResult").html(msg);
                        }else{
                            $("#showResult").html(msg);
                        }
                    }
                });
            });


            <!-- 添加POST -->
            $("#btnPost").click(function () {
                alert($("#myForm").serialize());
                $.ajax({
                    type:"POST",
                    url:"/team",
                    data:$("#myForm").serialize(),
                    dataType:"json",
                    success:function (data) {
                        alert(data);
                        if (data.code==200){
                            $("#showResult").html(msg);
                        }else{
                            $("#showResult").html("添加失败");
                        }
                    }
                });
            });


            <!-- 查询所有 -->
            $("#btnGetAll").click(function () {
                $.ajax({
                    type:"GET",
                    url:"/teams",
                    data:"",
                    dataType:"json",
                    success:function (data) {
                        alert(data);
                        if (data.code==200){
                            list = data.list;
                            var str = "";
                            for (var i=0; i<list.length; i++){
                                var obj = list[i];
                                str+=obj.teamId+","+obj.teamName;
                            }
                            $("#showResult").html(str);
                        }else{
                            $("#showResult").html(data.msg);
                        }
                    }
                });
            });
            <!-- 查询单个 -->
            $("#btnGetOne").click(function () {
                    //发起异步请求
                $.ajax({
                    type: "GET",
                    url: "/team/"+$("#teamId").val(), //RESTful风格的API定义
                    data: "",
                    dataType:"json",
                    success: function(data){
                        alert( "Data Saved: " + data );
                        if (data.code==200){
                            var obj = data.t;
                            if(obj==""){
                                $("#showResult").html("没有复合条件的数据！");
                            }else
                                $("#showResult").html(obj.teamId+"----"+obj.teamName+"----"+obj.location+"<br/>");
                        }else{
                            $("#showResult").html("查询出错！");
                        }
                    }
                });
            });
        });
    </script>
</html>
